<template>
  <div>
    <van-nav-bar
        :title="thisPage"
        :left-text="back"
        :left-arrow="leftArrow"
        @click-left="onClickLeft"
    >
      <template #right>
        <van-icon v-if="rightMenu" name="orders-o" size="18" @click="showPropAction"/>
      </template>
    </van-nav-bar>
    <van-space direction="vertical" fill>
      <router-view/>
    </van-space>
    <!-- 底部弹出 -->
    <van-popup
        v-model:show="showProp"
        position="bottom"
        :style="{ height: '30%' }"
    >
      <van-cell-group v-for="(value,key) in propList" :key="key">
        <van-cell :title="key" :value="value"/>
      </van-cell-group>

    </van-popup>

    <van-tabbar v-if="manPanel" v-model="active" route>
      <van-tabbar-item replace to="/m/login" icon="bars">设备列表</van-tabbar-item>
      <van-tabbar-item replace to="/m/settings" icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>

</template>
<script>
import {ref} from 'vue';
import 'vant/es/toast/style';
import switch_page from "@/js/switch_page";
import axios from "axios";
import handleExtAttr from "@/js/dev";


export default {
  name: 'mobile',
  data() {
    return {
      thisPage: '',
      back: '',
      leftArrow: false,
      manPanel: true,
      rightMenu: false,
      showProp: false,
      propList: {}
    }
  },
  setup() {
    const active = ref(0);
    const onLoad = () => {
    }
    return {active, onLoad};
  }, beforeRouteUpdate(to) {
    let location = switch_page.m[to.name];
    this.leftArrow = location.leftArrow;
    this.back = location.leftArrow ? '返回' : '';
    this.rightMenu = !!location.rightMenu;
    this.thisPage = location.title;
    // 切换下方导航栏是否显示， 主页面有导航栏，二级及以上页面不显示
    this.manPanel = location.manPanel;
    if (window.currentLightDev && location.isDevPanel) {
      let url = '/dm/getDevMo?sn=' + window.currentLightDev.sn;
      if (process.env.NODE_ENV === 'development') {
        url = window.dev.httpUrlBase + url;
      }
      axios.get(url).then((res) => {
        window.currentLightDev = handleExtAttr(res.data)
        this.propList = window.currentLightDev;
      }).catch(res => {
        console.log(res)
        this.propList = window.currentLightDev;
      })

    }
  }, created() {
    this.$router.push({path: switch_page.m.homepage});
  }, methods: {
    onClickLeft() {
      if (this.leftArrow) {
        history.back();
      }
    }, showPropAction() {
      this.showProp = true;
    }
  }
}
</script>

<style>
.v-modal {
  background: #E9EEF3;
}

.popPane {
  border: none;
  box-shadow: #26a2ff 0px 0px 0px 0.5px;
}

.controller_but {
  box-shadow: inset #bbbbbb 0px 0px 1px 1px;
}

.servoBar {
  padding: 0 5% 0 5%;

}
</style>